<script type="text/javascript">
    var Mage_deleteSlidePath = '<?php echo $this->getUrl('*/*/deleteSlide') ?>';
</script>
<div class="entry-edit">
    <?php echo $this->getFormHtml();?>
</div>

<div class="md-wrap">
        <a class="tab-link" id="add_tab" href="#"><span class="tab-text">[Add]</span></a>
        
        <?php $default_bg = Mage::helper('slider')->getFullMegaImageUrl('images/default_bg.jpg'); ?>
        <?php if($this->getRequest()->getParam("id") > 0): ?>
            <?php $slider_data = Mage::registry("slider_data")->getData(); ?>
            <?php $sliderData = Mage::getSingleton('slider/slider')->getMDSlider($slider_data['slid']); ?>
            <?php $slider = $sliderData['slider']; ?>
            <?php $slides = $sliderData['slides']; ?>
            <div id="md-tabs">
              <ul class="md-tabs-head clearfix">
              <?php for ($index = 0; $index < count($slides); $index++):?>
                <li class="tab-item first clearfix">
                  <a class="tab-link" href="#tabs-<?php print $index+1;?>"><span class="tab-text">Slide <?php print $index+1;?></span></a>
                  <span class="ui-icon ui-icon-close">Remove Tab</span>
                </li>
              <?php endfor;?>
              </ul>
              <?php foreach ($slides as $index => $slide): ?>
                <?php $slide = Mage::helper('slider')->preprocess_admin_slide_render($slide); ?>
                <?php $slideSetting = $slide['settings']; ?>
                <?php $layers = $slide['layers']; ?>

                <div id="tabs-<?php echo $index+1;?>" class="md-tabcontent clearfix" data-timelinewidth="<?php echo $slideSetting['timelinewidth'];?>">
                  <div class="settings">
                    <a href="#" id="panel-settings-link" class="panel-settings-link">[Choose background image]</a> &nbsp;
                    <a id="custom-thumbnail-setting" class="custom-thumbnail-setting" href="#">[Choose custom thumbnail image]</a> &nbsp;
                    <a class="panel-clone" href="#">[Clone slide]</a>
                    <input type="hidden" autocomplete="off" class="panelsettings" value='{"slide_id": <?php print $slide['sid'];?>, "fid": "<?php echo $slideSetting['background_image'];?>", "thumb_fid": "<?php echo $slideSetting['custom_thumbnail'];?>"}' />
                  </div>
                  <div class="md-slidewrap<?php print $class_fullwidth;?>" style="height: <?php print $slideSetting['height'];?>px;<?php if(!$slideSetting['full_width']): print 'width:' . $slideSetting['width'] . 'px'; endif; ?>">
                    <div class="md-slide-image"><img src="<?php echo Mage::helper('slider')->getFullMegaImageUrl($slideSetting['background_image']);?>" /></div>
                    <div class="md-objects" style="width: <?php print $slideSetting['width'];?>px; height: <?php print $slideSetting['height'];?>px;">


                    <?php foreach ($layers as $layer) : ?>  
                        <?php $layer['layer'] = $layer; ?>
                        <?php $layer = Mage::helper('slider')->preprocess_admin_layers_render($layer); //print_r($layer); exit; ?>
                        <?php if ($layer['type'] == 'text'):?>
                        <div class="slider-item ui-widget-content item-text ui-draggable ui-resizable" <?php echo $layer['data'];?> style="<?php print $layer['styles'];?>">
                            <p><?php print $layer['title'];?></p>
                            <span class="sl-tl"></span><span class="sl-tr"></span><span class="sl-bl"></span><span class="sl-br"></span>
                            <span class="sl-top"></span><span class="sl-right"></span><span class="sl-bottom"></span><span class="sl-left"></span>
                        </div>
                        <?php elseif ($layer['type'] == 'image'):?>
                        <div class="slider-item ui-widget-content item-image ui-draggable ui-resizable" <?php print $layer['data'];?> style="<?php print $layer['styles'];?>">
                            <img width="100%" height="100%" src="<?php print $layer['file_url'];?>" />
                            <span class="sl-tl"></span><span class="sl-tr"></span><span class="sl-bl"></span><span class="sl-br"></span>
                            <span class="sl-top"></span><span class="sl-right"></span><span class="sl-bottom"></span><span class="sl-left"></span>
                        </div>
                        <?php elseif ($layer['type'] == 'video'):?>
                        <div class="slider-item ui-widget-content item-video ui-draggable ui-resizable" <?php print $layer['data'];?> style="<?php print $layer['styles'];?>">
                            <img width="100%" height="100%" src="<?php print $layer['thumb'];?>" />
                            <span class="sl-tl"></span><span class="sl-tr"></span><span class="sl-bl"></span><span class="sl-br"></span>
                            <span class="sl-top"></span><span class="sl-right"></span><span class="sl-bottom"></span><span class="sl-left"></span>
                        </div>
                        <?php endif;?>
                    <?php endforeach; ?>
                    </div>
                  </div>
                </div>
              <?php endforeach;?>
            </div>
        <?php else:?>
            <?php 
            $slideSetting['width'] = 1008;
            $slideSetting['height'] = 370;
            ?><div id="md-tabs">
                <ul class="md-tabs-head clearfix">
                  <li class="tab-item first clearfix">
                    <a class="tab-link" href="#tabs-1"><span class="tab-text">Slide 1</span></a>
                    <span class="ui-icon ui-icon-close">Remove Tab</span>
                  </li>
                </ul>
                <div id="tabs-1" class="md-tabcontent clearfix" data-timelinewidth="<?php print $slideSetting['delay'];?>">
                    <div class="settings">            
                      <a href="#" class="panel-settings-link">[Choose background image]</a>
                      <a class="custom-thumbnail-setting" href="#">[Choose thumbnail image]</a> &nbsp;
                      <a class="panel-clone" href="#">[Clone slide]</a>
                      <input type="hidden" autocomplete="off" class="panelsettings" value='{"slide_id": -1, "fid": -1, "thumb_fid": -1}' /></div>
                    <div class="md-slidewrap<?php print $class_fullwidth;?>" style="height: <?php print $slideSetting['height'];?>px;<?php if(!$slideSetting['full_width']): print 'width:' . $slideSetting['width'] . 'px'; endif; ?>">
                        <div class="md-slide-image" id="md-slide-image-1"><img src="<?php print $default_bg;?>"<?php if(!$slideSetting['full_width']): ?> width="<?php print $slideSetting['width'];?>" height="<?php print $slideSetting['height'];?>"<?php endif; ?> /></div>
                        <div class="md-objects" style="width: <?php print $slideSetting['width'];?>px; height: <?php print $slideSetting['height'];?>px;">
                        </div>
                    </div>
                </div>
            </div>
        <?php endif;?>
  <div id="md-toolbar" class="md-toolbar">
            <a href="#" class="mdt-button mdt-text" title="Add new text"></a>
            <a href="#" class="mdt-button mdt-image" title="Add new image"></a>
            <a href="#" class="mdt-button mdt-video" title="Add new video"></a>

            <a href="#" class="mdt-button mdt-align-left" title="Align left edge"></a>
            <a href="#" class="mdt-button mdt-align-center" title="Align horizontal center"></a>
            <a href="#" class="mdt-button mdt-align-right" title="Align right edge"></a>
            <a href="#" class="mdt-button mdt-align-top" title="Align top edge"></a>
            <a href="#" class="mdt-button mdt-align-vcenter" title="Align vertical center"></a>
            <a href="#" class="mdt-button mdt-align-bottom" title="Align bottom edge"></a>

            <a href="#" class="mdt-button mdt-spacev" title="Space evenly vertically"></a>
            <a href="#" class="mdt-button mdt-spaceh" title="Space evenly horizontally"></a>
            <input type="text" value="" class="mdt-text mdt-spacei" />

            <a href="#" class="mdt-proportions mdt-proportions-yes" title="proportions"></a>
            <input type="text" value="" name="width" class="mdt-text mdt-input mdt-width" />
            <input type="text" value="" name="height" class="mdt-text mdt-input mdt-height" />
            <input type="text" value="" name="left" class="mdt-text mdt-input mdt-left" />
            <input type="text" value="" name="top" class="mdt-text mdt-input mdt-top" />

            <div class="mdt-item-type mdt-type-text">
                <div class="mdt-label">Text:</div>
                <textarea class="mdt-text mdt-textvalue" name="text"></textarea>
                <a href="#" class="mdt-button mdt-addlink" title="Add link"></a>
                <input type="text" value="12" name="font-size" class="mdt-text mdt-input mdt-fontsize" />
                <span class="mdt-fontsizeunit"></span>
                <select name="font-family" class="mdt-select mdt-font-family">
                    <option value=""></option>
                    <optgroup label="System fonts">
                        <option value="Arial" data-fontweight="400,700,400italic,700italic" style="font-family: Arial">Arial</option>
                        <option value="Verdana" data-fontweight="400,700,400italic,700italic" style="font-family: Verdana">Verdana</option>
                        <option value="Trebuchet MS" data-fontweight="400,700,400italic,700italic" style="font-family: 'Trebuchet MS'">Trebuchet MS</option>
                        <option value="Georgia" data-fontweight="400,700,400italic,700italic" style="font-family: Georgia">Georgia</option>
                        <option value="Times New Roman" data-fontweight="400,700,400italic,700italic" style="font-family: Times New Roman">Times New Roman</option>
                        <option value="Tahoma" data-fontweight="400,700,400italic,700italic" style="font-family: Tahoma">Tahoma</option>
                    </optgroup>
                </select>
                <select name="font-weight" class="mdt-select mdt-font-weight">
                    <option value=""></option>
                </select>

                <a href="#" class="mdt-button button-style mdt-font-underline" name="text-decoration" active="underline" normal="none" title="Underline"></a>
                <a href="#" class="mdt-button button-style mdt-font-allcaps" name="text-transform" active="uppercase" normal="none" title="All caps"></a>

                <a href="#" class="mdt-button button-align mdt-left-alignment" value="left" title="Left alignment"></a>
                <a href="#" class="mdt-button button-align mdt-center-alignment" value="center" title="Center alignment"></a>
                <a href="#" class="mdt-button button-align mdt-right-alignment" value="right" title="Right alignment"></a>
                <a href="#" class="mdt-button button-align mdt-justified-alignment" value="justify" title="Justified alignment"></a>

                <a class="mdt-button mdt-text-color" title="Text color"></a>
                <input type="hidden" name="color" value="" class="mdt-color mdt-input" />
                <input type="hidden" name="border-color" value="" class="mdt-border-color mdt-input" />
            </div>

            <div class="mdt-item-type mdt-type-image" style="display: none;" >
                <div class="mdti-image">
                    <input type="hidden" value="" name="fileid" class="mdt-text mdt-input mdt-image-fileid" />
                    <img class="mdt-imgsrc" src="" />
                </div>
                <a href="#" class="mdt-button mdt-addlink" title="Add link"></a>
                <div class="mdt-label">Image: <a id="change-image" href="#">Change</a></div>
                <textarea class="mdt-textarea mdt-imgalt" name="imgalt"></textarea>
            </div>
            <div class="mdt-item-type mdt-type-video" style="display: none;">
                <div class="mdti-image">
                    <input type="hidden" value="" name="fileid" class="mdt-text mdt-input mdt-video-fileid" />
                    <img class="mdt-videosrc"  src="" /><span class="mdt-play"></span>
                </div>
                <div class="mdt-label">Video: <a id="change-video" href="#">Change</a></div>
                <textarea class="mdt-textarea mdt-videoname" name="videoname"></textarea>
            </div>

            <input type="text" value="" readonly="readonly" name="starttime" class="mdt-text mdt-starttime" />
            <input type="text" value="" readonly="readonly" name="stoptime" class="mdt-text mdt-stoptime" />

            <select name="startani" class="mdt-select mdt-input mdt-startani">
                <option value="none">none</option>
                <option value="random">random</option>
				<option value="fadeIn">fadeIn</option>
				<option value="fadeInUp">fadeInUp</option>
				<option value="fadeInDown">fadeInDown</option>
				<option value="fadeInLeft">fadeInLeft</option>
				<option value="fadeInRight">fadeInRight</option>
				<option value="fadeInUpBig">fadeInUpBig</option>
				<option value="fadeInDownBig">fadeInDownBig</option>
				<option value="fadeInLeftBig">fadeInLeftBig</option>
				<option value="fadeInRightBig">fadeInRightBig</option>
				<option value="bounceIn">bounceIn</option>
				<option value="bounceInDown">bounceInDown</option>
				<option value="bounceInUp">bounceInUp</option>
				<option value="bounceInLeft">bounceInLeft</option>
				<option value="bounceInRight">bounceInRight</option>
				<option value="rotateIn">rotateIn</option>
				<option value="rotateInDownLeft">rotateInDownLeft</option>
				<option value="rotateInDownRight">rotateInDownRight</option>
				<option value="rotateInUpLeft">rotateInUpLeft</option>
				<option value="rotateInUpRight">rotateInUpRight</option>
				<option value="lightSpeedIn">lightSpeedIn</option>
				<option value="rollIn">rollIn</option>
            </select>
            <select name="stopani" class="mdt-select mdt-input mdt-stopani">
                <option value="none">none</option>
                <option value="random">random</option>
				<option value="fadeOut">fadeOut</option>
			  <option value="fadeOutUp">fadeOutUp</option>
			  <option value="fadeOutDown">fadeOutDown</option>
			  <option value="fadeOutLeft">fadeOutLeft</option>
			  <option value="fadeOutRight">fadeOutRight</option>
			  <option value="fadeOutUpBig">fadeOutUpBig</option>
			  <option value="fadeOutDownBig">fadeOutDownBig</option>
			  <option value="fadeOutLeftBig">fadeOutLeftBig</option>
			  <option value="fadeOutRightBig">fadeOutRightBig</option>
			  <option value="bounceOut">bounceOut</option>
			  <option value="bounceOutDown">bounceOutDown</option>
			  <option value="bounceOutUp">bounceOutUp</option>
			  <option value="bounceOutLeft">bounceOutLeft</option>
			  <option value="bounceOutRight">bounceOutRight</option>
			  <option value="rotateOut">rotateOut</option>
			  <option value="rotateOutDownLeft">rotateOutDownLeft</option>
			  <option value="rotateOutDownRight">rotateOutDownRight</option>
			  <option value="rotateOutUpLeft">rotateOutUpLeft</option>
			  <option value="rotateOutUpRight">rotateOutUpRight</option>
			  <option value="lightSpeedOut">lightSpeedOut</option>
			  <option value="rollOut">rollOut</option>
            </select>

            <input type="text" name="opacity" value="100" maxlength="3" class="mdt-text mdt-input mdt-opacity" />

            <select name="style" class="mdt-select mdt-input mdt-style">
                <option value="none">None</option>
            </select>

            <a class="mdt-button mdt-background-color" title="Background color"></a>
            <input type="hidden" id="background-color" class="mdt-background mdt-input" value="" name="background-color">
            <input type="text" value="" maxlength="3" name="background-transparent" class="mdt-text mdt-input mdt-background-transparent" />

            <div class="border-position" id="border-position">
                <a href="#" class="bp-all" title="All borders"><span></span></a>
                <a href="#" class="bp-top" title="Top borders"><span></span></a>
                <a href="#" class="bp-right" title="Right borders"><span></span></a>
                <a href="#" class="bp-bottom" title="Bottom borders"><span></span></a>
                <a href="#" class="bp-left" title="Left borders"><span></span></a>
            </div>
            <input type="text" value="" maxlength="3" name="border-width" class="mdt-text mdt-input mdt-border-width" />
            <select name="border-style" class="mdt-select mdt-input mdt-border-style">
                <option value="solid">solid</option>
                <option value="dashed">dashed</option>
                <option value="dotted">dotted</option>
                <option value="double">double</option>
            </select>

            <a class="mdt-button mdt-border-color" title="Border color"></a>
            <input type="hidden" id="border-color" class="mdt-border mdt-input" value="" name="border-color">

            <input type="text" value="" maxlength="2" name="border-top-left-radius" class="mdt-text mdt-border-radius mdt-br-topleft" />
            <input type="text" value="" maxlength="2" name="border-top-right-radius" class="mdt-text mdt-border-radius mdt-br-topright" />
            <input type="text" value="" maxlength="2" name="border-bottom-right-radius" class="mdt-text mdt-border-radius mdt-br-bottomright" />
            <input type="text" value="" maxlength="2" name="border-bottom-left-radius" class="mdt-text mdt-border-radius mdt-br-bottomleft" />
            <!-- CSS:
            -webkit-border-radius: 1px 2px 3px 4px;
            border-radius: 1px 2px 3px 4px;
            -->

            <input type="text" value="" maxlength="2" name="padding-top" class="mdt-text mdt-padding mdt-p-top" />
            <input type="text" value="" maxlength="2" name="padding-right" class="mdt-text mdt-padding mdt-p-right" />
            <input type="text" value="" maxlength="2" name="padding-bottom" class="mdt-text mdt-padding mdt-p-bottom" />
            <input type="text" value="" maxlength="2" name="padding-left" class="mdt-text mdt-padding mdt-p-left" />
            <div id="mdt-linkexpand" class="mdt-linkexpand">
                <a href="#" class="mdt-link-close"></a>
                <input type="text" value="" name="" class="mdt-text mdt-link-value" />
                <input type="text" value="" name="" class="mdt-text mdt-link-title" />

                <a class="mdt-link-color mdt-edit-color" title="Hover text color"></a>
                <input type="hidden" id="link-color" class="link-color" value="" name="link-color">

                <a class="mdt-link-background mdt-edit-color" title="Hover background color"></a>
                <input type="hidden" id="link-background" class="link-background" value="" name="link-background">
                <input type="text" value="" maxlength="3" name="link-background-transparent" class="mdt-text link-background-transparent" />

                <a class="mdt-link-border mdt-edit-color" title="Hover border color"></a>
                <input type="hidden" id="link-border" class="link-border" value="" name="link-border">

                <a href="#" class="mdt-link-remove">Remove</a>
                <a href="#" class="mdt-link-save">Save</a>
            </div>
        </div><!-- /#md-toolbar -->

  <div class="md-timeline">
            <div class="mdtl-layers">
                <div class="mdtl-head">
                    <div class="mdtl-head-left">Timeline</div>
                    <div class="mdtl-head-right">
                        <div class="mdtl-ruler">
                          <?php for ($i = 0; $i <20;$i++): ?>
                            <div class="number"><span><?php print $i;?></span></div>
                            <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                          <?php endfor;?>
                        </div>
                        <div id="slideshow-time"><div></div></div>
                    </div>
                </div>
                <div class="timeline-wrap">
                    <div id="timeline-items">

                    </div>
                </div>
            </div>
        </div><!-- /.md-timeline -->
    <!-- dialog -->
</div>
<div id="dlg-video" style="display:none;" title="Item setting"><?php include("includes/dlgvideo.php"); ?></div>
<a id="edit-slider-submit" href="#">Get data</a>
<textarea name="slides" id="dlg-slide-data"></textarea>
<input id="savedcolor1" type="hidden" name="color_saved" value="ff9900,CC0000" />
<div style="display:none;" id="dlg-slide-setting">
    <div class="settings">
        <a href="#" class="panel-settings-link">[Choose background image]</a> &nbsp;
        <a href="#" class="custom-thumbnail-setting">[Choose thumbnail image]</a> &nbsp;
        <a href="#" class="panel-clone">[Clone slide]</a>
        <input type="hidden" autocomplete="off" value="{&quot;slide_id&quot;: -1, &quot;fid&quot;: -1, &quot;thumb_fid&quot;: -1}" class="panelsettings">
    </div>
    <div style="height: 420px; width:960px" class="md-slidewrap">
        <div class="md-slide-image"><img width="960" height="420" src="<?php echo $this->getSkinUrl() ?>megadrupal/img/image1.jpg"></div>
        <div style="width: 960px; height: 420px;" class="md-objects">
        </div>
    </div>
</div>
<input type="hidden" name="default-timelinewidth" value="80">


<?php echo $this->getChildHtml('form_after');?>